<template>
  <div class="add-ship-address">
    <mt-field
      label="收货人"
      placeholder="请输入收货人"
      v-model.trim="consigneeName"
    ></mt-field>
    <mt-field
      label="手机号"
      placeholder="请输入手机号码"
      v-model.number.trim="phone"
    ></mt-field>

    <div>
      <div @click="popupVisible = !popupVisible">
        <mt-field
          label="地址"
          placeholder="省份 - 地区 - 城市"
          v-model="selectAddress"
          disabled
        >
        </mt-field>
      </div>
      <mt-popup v-model="popupVisible" position="bottom">
        <div class="pop-btn flex a-center j-center">
          <p @click="cancel">取消</p>
          <p @click="save">确定</p>
        </div>
        <mt-picker
          :slots="slots"
          value-key="name"
          @change="changeCity"
        ></mt-picker>
      </mt-popup>
    </div>

    <mt-field
      label="详细地址"
      placeholder="请输入详细地址"
      v-model="otherAddr"
    ></mt-field>

    <div class="add-btn">
      <mt-button type="primary" @click="addAddr">添加地址</mt-button>
    </div>
  </div>
</template>

<script>
import addrData from "assets/pca.json";

export default {
  name: "AddShipAddress",
  data() {
    return {
      consigneeName: "",
      phone: "",
      otherAddr: "",

      slots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: [], //省份数组
          className: "slot1",
          textAlign: "center",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center",
        },
        {
          divider: true,
          content: "-",
          className: "slot4",
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "center",
        },
      ],
      popupVisible: false, //是否显示popup弹出层
      pca: {},
      selectAddress: [],
    };
  },
  methods: {
    //城市的picker改变时调用
    changeCity(picker, values) {
      if (values[0]) {
        picker.setSlotValues(1, Object.keys(this.pca[values[0]])); //只要有一级数据就绑二级数据
        picker.setSlotValues(2, this.pca[values[0]][values[1]]); //只要有二级数据就帮三级数据
        this.selectAddress = values;
      }
    }, //获取城市数据
    _getCityData() {
      // fetch({
      //   url: "../src/assets/pca.json",
      // })
      //   .then((res) => {
      //     return res.json();
      //   })
      //   .then((data) => {
      //     console.log(data);
      //   });

      this.pca = addrData;
      this.slots[0].values = Object.keys(addrData); //绑定一级数据
    },
    cancel() {
      this.popupVisible = false;
    },
    save() {
      this.popupVisible = false;
    },
    // 添加地址
    addAddr() {
      console.log(this.$store.state.userInfo.shippingAddrs.length);
      let nAddr = {
        id: this.$store.state.userInfo.shippingAddrs.length,
        province: this.selectAddress[0],
        city: this.selectAddress[1],
        county: this.selectAddress[2],
        town: "",
        other: this.otherAddr,
        phone: this.phone,
        consigneeName: this.consigneeName,
        callback: () => {
          this.$router.replace({
            name: "addressManage",
          });
        },
      };
      this.$store.commit("addAddr", nAddr);
      this.$store.commit("saveInfo");
      
    },
  },
  mounted() {
    this._getCityData();
  },
};
</script>

<style scoped>
.mint-popup-bottom {
  left: 0;
  right: 0;
  transform: none;
}
.pop-btn p {
  flex: 1;
  text-align: center;
  color: var(--theme);
}
.add-btn {
  margin-top: 20px;
  padding: 0 20px;
}
.add-btn button {
  width: 100%;
}
</style>